﻿
@{
    ViewBag.Title = "ChangePassword";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}


@section head {

    <style type="text/css">
        .top1 .top1Left {
            margin: 0px auto;
            width: 600px;
            height: 470px;
            border: solid 1px #978f94;
        }

            .top1 .top1Left ul li {
                margin-top: 10px;
                height: 50px;
                /*border: solid 1px blue;*/
            }

        .label-div {
            float: left;
            padding-top: 6px;
            width: 180px;
        }

            .label-div label {
                float: right;
                width: 190px;
                text-align: right;
                padding-right: 32px;
                padding-left: 32px;
                font-weight: 600;
                font-size: 16px;
            }

        .input-div {
            display: -webkit-inline-box;
        }

            .input-div input {
                border: 1px solid #8c7272;
                height: 32px;
                border-radius: 3px;
                font-size: 16px;
                width: 360px;
                padding: 0 10px;
            }
    </style>

}
<div class="myIndex">
    <div class="center">
        <div class="centerTop">
            <div class="top1">
                <div class="top1Left">
                    <ul>
                        <li style="height: 160px;">
                            <img id="profilePic" style="border-radius:50%;margin-left: 65px;" src="https://scontent-hkg3-2.cdninstagram.com/vp/761993dc007e86f9968a9f938e80e70a/5B697B1A/t51.2885-19/s150x150/25005602_1904421042944210_7172550441782214656_n.jpg">
                            <div style="float: right;width: 55%;height: 100%;line-height: 6;">
                                <h1 style="font-size: x-large;">@ViewBag.UserName</h1>
                            </div>
                        </li>
                        <li>
                            <div class="label-div">
                                <label>Old password</label>
                            </div>
                            <div class="input-div">
                                <input type="password" id="oldPwd" maxlength="16" value="">
                            </div>
                        </li>
                        <li>
                            <div class="label-div">
                                <label>New password</label>
                            </div>
                            <div class="input-div">
                                <input type="password" id="newPwd" maxlength="16" value="">
                            </div>
                        </li>
                        <li>
                            <div class="label-div">
                                <label>Re-New password</label>
                            </div>
                            <div class="input-div">
                                <input type="password" id="reNewPwd" maxlength="16" value="">
                            </div>
                        </li>
                        <li>
                            <button id="btnChangePwd" style="display: block;margin:10px auto;padding: 5px 10px;font-size: 16px;background: #3897f0;border-radius: 3px;color: #fff;border-style: solid;border-width: 1px;
border-color: #3897f0;">
                                Change The Password
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


@section script {
    <script>
        $(function () {
            $("#btnChangePwd").click(function () {
                var oldPwd = $("#oldPwd").val();
                if (oldPwd.length == 0) {
                    alert("Old password cannot be empty!");
                    return;
                }
                var newPwd = $("#newPwd").val();
                if (newPwd.length == 0) {
                    alert("New password cannot be empty!");
                    return;
                }
                if (newPwd.length > 16) {
                    alert("Password length cannot be greater than 16!");
                    return;
                }
                var reNewPwd = $("#reNewPwd").val();
                if (reNewPwd.length == 0) {
                    alert("Repeat new password cannot be empty!");
                    return;
                }
                if (newPwd != reNewPwd) {
                    alert("Repeat the new password is not the same!");
                    return;
                }
                if (newPwd == oldPwd) {
                    alert("The new password cannot be the same as the old password!");
                    return;
                }
                $.ajax({
                    url: "/User/ChangePassword",
                    type: "post",
                    dataType: "json",
                    data: { oldPwd: oldPwd, newPwd: newPwd },
                    success: function (res) {
                        if (res.Status == "OK") {
                            alert("Password has been updated");
                            $("#oldPwd").val("");
                            $("#newPwd").val("");
                            $("#reNewPwd").val("");
                        }
                        else {
                            alert(res.ErrorMsg);
                        }
                    },
                    error: function () {
                        alert("Network error");
                    }
                });
            });
        });
    </script>
}
